<!DOCTYPE html>
<html lang="en" style="font-size: 0.133333vw;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑电影-首页</title>
    <link rel="stylesheet" href="./CSS/ALL.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>

<body>
    <!-- 容器 -->
    <div class="container">
        <!-- 头部开始 -->
        <header>
            <div class="address">
                <select name="address">
                    <option value="上海">上海</option>
                    <option value="北京">北京</option>
                    <option value="深圳">深圳</option>
                    <option value="天津">天津</option>
                    <option value="江苏">江苏</option>
                </select>
            </div>

            <div class="search">
                <input type="text" placeholder="请输入电影名称、电影院">
            </div>

            <div class="scan">
                <a href="#"><img src="./IMG/images/icon/scan_icon.png" alt="图片丢失"></a>
            </div>
        </header>

        <!-- 头部结束 -->


        <!-- banner开始 -->
        <div class="banner">
            <img src="./IMG/images/source/source_1.jpg">
        </div>
        <!-- banner结束 -->


        <!-- film开始 -->
        <div class="film">

            <div class="film-info">
                <a href="#">
                    <p class="title">正在热映</p>
                </a>
                <a href="#">
                    <img src="./IMG/images/source/movie_1.jpg">
                    <p class="name">八佰</p>
                    <p class="date">2020-08-01上映</p>
                </a>
            </div>


            <div class="film-info">
                <a href="#">
                    <p class="title">即将上映</p>
                </a>
                <a href="#">
                    <img src="./IMG/images/source/movie_2.jpg">
                    <p class="name">我在时间的尽头等你</p>
                    <p class="date">2020-08-01上映</p>
                </a>
            </div>


            <div class="film-info">
                <a href="#">
                    <p class="title">排行榜</p>
                </a>
                <a href="#">
                    <img src="./IMG/images/source/movie_3.jpg">
                    <p class="name">荞麦疯长</p>
                    <p class="date">2020-08-01上映</p>
                </a>
            </div>


            <!-- more-film开始 -->
            <div class="more-film">
                <a href="#">查看更多(30部)></a>
            </div>

        </div>
        <!-- film结束 -->


        <!-- movie开始 -->
        <div class="movie">
            <div class="movie-content">
                <div class="movie-content-title">
                    <div class="text">人气影院</div>
                    <div class="text"><a href="#">查看全部</a></div>
                </div>


                <a href="#">
                    <div class="movie-info">
                        <div class="title">
                            <span>嘉年华国际影城(北路店)</span>
                            <span class="grey">人气5000</span>
                        </div>
                        <div><span class="grey">南宁市某某某路4楼</span></div>
                        <div>
                            <div class="label">
                                <p>零食</p>
                                <p>MAX厅</p>
                                <p>中国巨幕</p>
                                <p>停车场</p>
                            </div>
                            <span>1.1km</span>
                        </div>
                        <div>
                            <p>
                                <span>卡</span>开通会员卡8折购票
                                <span>团</span>组团购票优惠8折起
                            </p>
                            <span class="red">￥19.9起</span>
                        </div>
                    </div>
                </a>

            </div>



            <div class="movie-content">
                <div class="movie-content-title">
                    <div class="text">人气影院</div>
                    <div class="text"><a href="#">查看全部</a></div>
                </div>


                <a href="#">
                    <div class="movie-info">
                        <div class="title">
                            <span>嘉年华国际影城(北路店)</span>
                            <span class="grey">人气5000</span>
                        </div>
                        <div><span class="grey">南宁市某某某路4楼</span></div>
                        <div>
                            <div class="label">
                                <p>零食</p>
                                <p>MAX厅</p>
                                <p>中国巨幕</p>
                                <p>停车场</p>
                            </div>
                            <span>1.1km</span>
                        </div>
                        <div>
                            <p>
                                <span>卡</span>开通会员卡8折购票
                                <span>团</span>组团购票优惠8折起
                            </p>
                            <span class="red">￥19.9起</span>
                        </div>
                    </div>
                </a>

            </div>
        </div>
        <!-- movie结束 -->




        <!-- footer开始 -->
        <footer>
            <a href="index.html">
                <img src="./IMG/images/icon/home_a_icon.png">
                <p class="red">首页</p>
            </a>
            <a href="movie.html">
                <img src="./IMG/images/icon/movie_n_icon.png">
                <p>电影</p>
            </a>
            <a href="cinema.html">
                <img src="./IMG/images/icon/cinema_n_icon.png">
                <p>电影院</p>
            </a>
            <a href="find.html">
                <img src="./IMG/images/icon/find_n_icon.png">
                <p>发现</p>
            </a>
            <a href="mine.html">
                <img src="./IMG/images/icon/mine_n_icon.png">
                <p>我的</p>
            </a>
        </footer>
        <!-- footer结束 -->
    </div>
</body>

</html>